<template>
  <div class="app-container">
    <el-tag color="#2b85e4" style="color:white;margin-bottom:20px" size="large">
      基本信息
    </el-tag>
    <el-row>
      <el-col :span="4" class="m-col">咨询人姓名</el-col>
      <el-col :span="8" class="m-col-left">{{formData.inquiryCustomerName}}</el-col>
      <el-col :span="4" class="m-col-left">咨询人手机</el-col>
      <el-col :span="8" class="m-col-left">{{formData.inquiryCustomerTelphone}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4" class="m-col">报价时间</el-col>
      <el-col :span="8" class="m-col-left">{{formData.updatedTime}}</el-col>
      <el-col :span="4" class="m-col-left">创建时间</el-col>
      <el-col :span="8" class="m-col-left">{{formData.createdTime}}</el-col>
    </el-row>
    <el-row>
      <!--<el-col :span="4" class="m-col">保险提供商</el-col>-->
      <!--<el-col :span="8" class="m-col-left">{{formData.operationIp}}</el-col>-->
      <el-col :span="4" class="m-col">报价员工</el-col>
      <el-col :span="20" class="m-col-left">{{formData.inquiryUserName}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4" class="m-col">总报价</el-col>
      <el-col :span="20" class="m-col-left">{{getTotal(formData.inquiryQuotation) + '元'}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="4" class="m-col-bottom">行驶证图片</el-col>
      <el-col :span="20" class="m-col-bottom-left">
        <div style="margin-top: 25px"
             v-if="formData.customerDrivingLicenceUrl!=null && formData.customerDrivingLicenceUrl!=''">
          <div style="width: 100px;height: 100px" @click="showImg(formData.customerDrivingLicenceUrl)">
            <img :src="formData.customerDrivingLicenceUrl==null?'':baseUrl+formData.customerDrivingLicenceUrl"
                 style="width:100%;height:100%"></img>
          </div>
        </div>
        <!--<img :src="baseUrl+formData.customerDrivingLicenceUrl"-->
        <!--v-if="formData.customerDrivingLicenceUrl!=null && formData.customerDrivingLicenceUrl!=''" width="200"-->
        <!--height="200">-->
        <p v-else style="text-align: center;margin-top:100px">无相关图片</p>
      </el-col>
    </el-row>
    <el-tag color="#2b85e4" style="color:white;margin-bottom:10px;margin-top:10px" size="large">
      报价信息
    </el-tag>
    <div style="margin-top:10px;margin-bottom: 10px">
      <el-button icon="el-icon-plus" type="primary" size="mini" @click="addData">新增</el-button>
      <el-button icon="el-icon-close" type="danger" size="mini" @click="deleteAny">删除</el-button>
    </div>
    <el-table
      :data="inquiryQuotationtTable"
      border
      empty-text="暂无数据"
      style="width: 100%"
      @selection-change="handleQuoteSelectionChange">
      <el-table-column
        type="selection"
        width="35">
      </el-table-column>
      <el-table-column
        label="报价项目"
        property="title">
      </el-table-column>
      <el-table-column
        label="报价价格"
        property="value">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-edit"
            type="success"
            @click="editData(scope.$index, scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-tag color="#2b85e4" style="color:white;margin-bottom:10px;margin-top:10px" size="large">
      报价图片
    </el-tag>
    <el-row :gutter="30">
      <el-col :span="24">
        <el-upload
          :file-list="carInsuranceInquiryImg"
          :action="uploadUrl"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :limit="1">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-col>
    </el-row>
    <br/>
    <el-button type="primary" @click="handleSave" :loading="loading">保存</el-button>
    <el-dialog :title="actionType=='add'?'新增报价':'修改报价'" :visible.sync="dialogQuoteFormVisible" top="5vh">
      <el-form :model="quoteFormData" ref="operationRuleForm">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="报价项目" :label-width="formLabelWidth">
              <el-select v-model="quoteFormDataItem.pTitle" clearable placeholder="请选择"
                         @change="firstCarInsuranceInquiryItemChange">
                <el-option
                  v-for="item in firstCarInsuranceInquiryItem"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
              <el-select v-model="quoteFormDataItem.title" clearable placeholder="请选择">
                <el-option
                  v-for="item in secondCarInsuranceInquiryItem"
                  :key="item.key"
                  :label="item.title"
                  :value="item.title">
                </el-option>
              </el-select>
              <!--<el-input v-model="quoteFormData.item" placeholder="请输入报价项目" style="width:300px"></el-input>-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="报价金额" :label-width="formLabelWidth">
              <el-input-number v-model="quoteFormDataItem.value" :precision="2" :step="0.01"
                               style="width:300px"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogQuoteFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleQuoteAdd" v-if="actionType=='add'" :loading="loading">保存
        </el-button>
        <el-button type="primary" @click="handleQuoteEdit" v-else :loading="loading">修改</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible" top="10vh">
      <div style="text-align: center">
        <img :src="baseUrl+imgUrl" style="width:80%;height: auto">
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .m-col {
    border: 1px solid #ebeef5;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    color: #909399;
    font-weight: 500;
    font-size: 12px;
  }

  .m-col-left {
    border: 1px solid #ebeef5;
    border-left: none;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
  }

  .m-col-bottom {
    border: 1px solid #ebeef5;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
    color: #909399;
    font-weight: 500;
    font-size: 12px;
  }

  .m-col-bottom-left {
    border: 1px solid #ebeef5;
    border-left: none;
    padding-left: 10px;
    height: 250px;
    overflow-y: auto;
    font-size: 12px;
  }
</style>

<script>
  import carInsurranceInquiryApi from '@/api/carInsuranceInquiryApi'

  export default {
    created() {
      this.getData()
    },
    data() {
      return {
        baseUrl: process.env.IMG_BASE_URL,
        uploadUrl: process.env.BASE_API + '/admin/car/insurance/inquiry/upload',
        inquiryQuotationtTable: [],
        fItem: '',
        sItem: '',
        quoteFormDataItem: {
          pTitle: '',
          title: '',
          value: ''
        },
        quoteFormDataItems: {
          title: '',
          items: []
        },
        actionType: 'add',
        dialogQuoteFormVisible: false,
        formData: {
          inquiryQuotation: [],
          insuranceInquiryImgUrl: ''
        },
        loading: false,
        id: this.$route.query.id,
        handleItem: '',
        multipleQuoteSelection: [],
        formLabelWidth: '80px',
        firstCarInsuranceInquiryItem: [],
        secondCarInsuranceInquiryItem: [],
        dialogImageUrl: '',
        dialogVisible: false,
        carInsuranceInquiryImg: [],
        dialogImgFormVisible: false,
        imgUrl: ''
      }
    },
    methods: {
      showImg(url) {
        this.dialogImgFormVisible = true
        this.imgUrl = url
      },
      handleRemove(file, fileList) {

      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handleSuccess(response, file, fileList) {
        this.formData.insuranceInquiryImgUrl = response.data.url
      },
      initInquiryQuotationtTable() {
        this.inquiryQuotationtTable = []
        for (var iq of this.formData.inquiryQuotation) {
          for (var i of iq.items) {
            let p = {
              pTitle: '',
              title: '',
              value: ''
            }
            p.pTitle = iq.title
            p.title = i.title
            p.value = i.value
            this.inquiryQuotationtTable.push(p)
          }
        }
      },
      firstCarInsuranceInquiryItemChange(value) {
        for (var fcii of this.firstCarInsuranceInquiryItem) {
          if (value === fcii.name) {
            this.secondCarInsuranceInquiryItem = fcii.items
            break;
          }
        }
      },
      getData() {
        let that = this
        this.loading = true
        this.carInsuranceInquiryImg = []
        carInsurranceInquiryApi.get(this.id, (res) => {
          that.formData = res
          if (res.insuranceInquiryImgUrl != null) {
            let image = {
              url: that.baseUrl + that.formData.insuranceInquiryImgUrl
            }
            that.carInsuranceInquiryImg.push(image)
          }
          this.initInquiryQuotationtTable()
          this.loading = false
        }, () => {

        })
      },
      getTotal(itemQuotations) {
        if (itemQuotations == null) return ''
        let totelQuotation = 0
        for (var iq of itemQuotations) {
          for (var i of iq.items) {
            totelQuotation += i.value
          }
        }
        return totelQuotation
      },
      addData() {
        carInsurranceInquiryApi.listCarInsuranceInquiryItem((res) => {
          this.firstCarInsuranceInquiryItem = res
          this.quoteFormData = {
            item: '',
            price: 0
          }
          this.actionType = 'add'
          this.dialogQuoteFormVisible = true
        }, () => {
        })
      },
      handleQuoteAdd() {

        var nSet = true
        for (var qfd of this.formData.inquiryQuotation) {
          if (qfd.title === this.quoteFormDataItem.pTitle) {
            let nqfdi = {
              title: '',
              value: ''
            }
            nqfdi.title = this.quoteFormDataItem.title
            nqfdi.value = this.quoteFormDataItem.value
            qfd.items.push(nqfdi)
            nSet = false
            break
          }
        }

        if (nSet) {
          let nqfdis = {
            title: '',
            items: []
          }
          nqfdis.title = this.quoteFormDataItem.pTitle
          let nqfdi = {
            title: '',
            value: ''
          }
          nqfdi.title = this.quoteFormDataItem.title
          nqfdi.value = this.quoteFormDataItem.value
          nqfdis.items.push(nqfdi)
          this.formData.inquiryQuotation.push(nqfdis)
        }

        this.quoteFormDataItem = {}
        this.initInquiryQuotationtTable()
        this.dialogQuoteFormVisible = false
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
      },
      editData(index, row) {
        for (const s of this.formData.inquiryQuotation) {
          if (s.item === row.item) {
            this.handleItem = row.item
            let qqquoteFormData = {
              item: '',
              price: 0
            }
            qqquoteFormData.item = s.item
            qqquoteFormData.price = s.price
            this.quoteFormData = qqquoteFormData
            this.actionType = 'edit'
            this.dialogQuoteFormVisible = true
            break
          }
        }
      },
      handleQuoteEdit() {
        let index = 0;
        for (const s of this.formData.inquiryQuotation) {
          if (s.item === this.handleItem) {
            this.formData.inquiryQuotation.splice(index, 1)
            this.formData.inquiryQuotation.push(this.quoteFormData)
            this.dialogQuoteFormVisible = false
            this.$message({
              type: 'success',
              message: '更新成功!'
            })
            break
          }
          index++
        }
      },
      handleSave() {
        carInsurranceInquiryApi.quoteCarInsuranceInquiry(this.id, this.formData, (res) => {
          this.$message({
            type: 'success',
            message: '报价成功!'
          })
        }, () => {
        })
      },
      handleQuoteSelectionChange(val) {
        this.multipleQuoteSelection = []
        for (var ms of val) {
          this.multipleQuoteSelection.push(ms.item)
        }
      },
      deleteAny() {
        if (this.multipleQuoteSelection.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for (const m of this.multipleQuoteSelection) {
            let i = 0
            for (const s of this.formData.inquiryQuotation) {
              if (s.item === m) {
                this.formData.inquiryQuotation.splice(i, 1)
                break
              }
              i++
            }
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
</script>
